<template>
	<view class="contain-body">
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box" @change="change" :autoplay="true" :interval="1000" :circular="true">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<view class="swiper-item">
						<image :src="item.url" mode="" class="imageTab"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="card">
			<view class="priceCard">
				<view class="flexrow margin15">
					<view class="bjNew">
						全新
					</view>
					<text class="fontBlod">iPhone 15</text>
				</view>
				<view class="flexrow bw">
					<view class="color-orang">
						<text class="font12">￥</text>
						<text class="font16">{{priceNum}}</text>
						<text>/期起</text>
					</view>
					<view class="colorGrey">
						<text>{{num}}期</text>
						<text>|</text>
						<text>想分就分</text>
						<text>月销{{sales}}</text>
					</view>
				</view>
			</view>
		</view>
		<scroll-view class=" nav" scroll-with-animation scroll-x>
			<view class="cu-item tab" :class="0 == TabCur ? 'text-blue cur' : ''" :key="0" @tap="tabSelect"
				:data-id="0">
				商品详情
			</view>
			<view class="cu-item tab" :class="1 == TabCur ? 'text-blue cur' : ''" :key="1" @tap="tabSelect"
				:data-id="1">分期说明
				<u-badge class="tab-badge" type="error" max="99" :value="tabBadges.pendingExecute"></u-badge>
			</view>
			<view class="cu-item tab" :class="2 == TabCur ? 'text-blue cur' : ''" :key="2" @tap="tabSelect"
				:data-id="2">
				常见问题
			</view>
		</scroll-view>
		<view class="heigth">
			<image v-if="TabCur == 0" :src="changtuImg" mode=" widthFix" class="long-image" ref="your-image-id"
				:style="{height:imgHeight + 'px'}"></image>
			<image v-if="TabCur == 1" :src="changtuImg2" mode=" " class="long-image2"></image>
			<image v-if="TabCur == 2" :src="changtuImg2" mode=" widthFix" class="long-image2"></image>
		</view>
		<view class="con-bottom">
			<view class="flexrow con-width">
				<view class="flexCloum" style="margin-right: 20px;">
					<image src="../../static/home.png"></image>
					首页
				</view>
				<view class="flexCloum">
					<image src="../../static/kefu.png"></image>
					客服
				</view>
			</view>
			<button class="selectBtn" @click="showModel()">立即下单</button>
		</view>

		<uni-popup ref="popup" background-color="#fff" @change="change" type="bottom">
			<view class="model-con">
				<image src="../../static/close.png" class="close" @click="closePopup()"></image>
				<view class="shopCloumn">
					<text class="blodTxt">套餐</text>
					<view class="shop-item" v-for="(item,index) in functionBoxList" :key="item.title"
						@click="goToItem(index)">
						<view :class="TypeIndex === index ? 'activeItem':''" class="itemBj">{{item.title}}</view>
					</view>
				</view>
				<view class="shopCloumn">
					<text class="blodTxt">颜色</text>
					<view class="flexrow">
						<view class="shop-item" v-for="(item,index) in functionBoxList2" :key="item.title"
							@click="goshowChange(item,index)">
							<view class="itemBj" :class="TypeIndex === index ? 'activeItem':''">{{item.color}}</view>
						</view>
					</view>
				</view>
				<view class="shopCloumn">
					<text class="blodTxt">分期</text>
					<view class="flexrow">
						<view class="shop-item" v-for="(item,index) in functionBoxList3" :key="item.title"
							@click="goshowChange2(item,index)">
							<view class="itemBj" :class="TypeIndex === index ? 'activeItem':''">{{item.color}}</view>
						</view>
					</view>
				</view>
				<view class="shopCloumn">
					<text class="blodTxt">数量</text>
					<uni-number-box v-model="vModelValue" @blur="blur" @focus="focus" @change="changeValue" />
				</view>
				<view class="shopCloumn">
					<text class="blodTxt">版本</text>
					<view class="shop-item" v-for="(item,index) in functionBoxList4" :key="item.title"
						@click="goshowChange3(index)">
						<view :class="TypeIndex === index ? 'activeItem':''" class="itemBj">{{item.title}}</view>
					</view>
				</view>
				<view class="shopCloumn">
					<text class="blodTxt">服务保障</text>
					<view class="shop-item" v-for="(item,index) in functionBoxList5" :key="item.title"
						@click="goshowChange4(item,index)">
						<view :class="TypeIndex === index ? 'activeItem':''" class="itemBj">{{item.title}}</view>
					</view>
				</view>
				<view class="sureBottom">
					<button class="sureBtn" @click="gotoPay">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vModelValue: 1,
				TypeIndex: 0,
				TypeIndex2: 0,
				TypeIndex3: 0,
				TypeIndex4: 0,
				imageWidth: 0,
				imageHeight: 0,
				TabCur: 0,
				priceNum: 1680.00,
				num: 5,
				sales: 163,
				showModelPop: true,
				changtuImg: 'https://img.picgo.net/2024/05/06/changtu225e40323399f98be.jpeg',
				changtuImg2: 'https://img.picgo.net/2024/05/06/changtu1a029cb75c6cb5a60.jpeg',
				info: [{
					url: '/static/iphone15.png',
				}, {
					url: '/static/iphone15.png',
				}, {
					url: '/static/iphone15.png',
				}],
				current: 0,
				mode: 'dot',
				dotsStyles: [{
					backgroundColor: 'rgba(0, 0, 0, .3)',
					border: '1px rgba(0, 0, 0, .3) solid',
					color: '#fff',
					selectedBackgroundColor: '#FF8B07',
					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
				}, ],
				functionBoxList: [{
					title: '分期产品'
				}],
				functionBoxList2: [{
						color: '粉色'
					},
					{
						color: '黑色'
					},
					{
						color: '黄色'
					},
					{
						color: '蓝色'
					},
					{
						color: '绿色'
					},
				],
				functionBoxList3: [{
						color: '7天'
					},
					{
						color: '10天'
					},
				],
				functionBoxList4: [{
					title: '512G'
				}],
				functionBoxList5: [{
					title: '碎屏保障￥599'
				}],
			};
		},
		components: {

		},
		// 更新后的生命周期
		mounted() {

		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			tabSelect(e) {
				console.log(e);
				this.TabCur = e.currentTarget.dataset.id;
			},
			getImageSize() {
				const query = uni.createSelectorQuery().in(this);
				console.log('data', query);
				query.select('#your-image-id').boundingClientRect(data => {
					console.log('data', data);
					if (data) {
						this.imageWidth = data.width;
						this.imageHeight = data.height;
						// 此处可以使用data.width和data.height获取图片的原始宽度和高度
					}
				}).exec()

			},
			showModel() {
				this.$refs.popup.open('bottom')
			},
			closePopup() {
				this.$refs.popup.close()
			},
			goshowChange(item, index) {
				this.TypeIndex = index;

			},
			goshowChange2(item, index) {
				this.TypeIndex2 = index;
			},
			goshowChange3(item, index) {
				this.TypeIndex3 = index;
			},
			goshowChange4(item, index) {
				this.TypeIndex4 = index;
			},
			gotoPay(){
				uni.navigateTo({
					url: "/pages/classify/confirm-order"
				})
			}
		}
	}
</script>

<style lang="scss">
	.contain-body {
		position: relative;
	}

	.heigth {
		height: calc(100% - 561px);
	}



	.close {
		width: 15px;
		height: 15px;
		position: absolute;
		right: 15px;
		top: 15px;
	}

	.blodTxt {
		font-weight: bold;
		margin-bottom: 10px;
	}

	.model-con {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 15px 15px 60px 15px;
		box-sizing: border-box;
		font-size: 14px; 
		height: 450px;
		overflow-y: auto;
		position: relative;
	}

	.model-body {
		width: 100%;
		background-color: #fff;
		border-radius: 8px 8px 0 0;
	}

	.con-width {
		width: 100px;
		justify-content: space-around;
		font-size: 13px;
	}

	.con-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 20px;
		box-sizing: border-box;
		background-color: #fff;
		border-top: 1px solid #ddd;
	}

	.con-bottom image {
		width: 20px;
		height: 20px;
		margin-bottom: 5px;
	}

	.long-image {
		width: 100%;
		/* 图片宽度不超过容器宽度 */
		max-width: 100%;
		/* 图片最大宽度 */
		height: 4500px;
		/* 图片高度自动缩放以保持比例 */
	}

	.long-image2 {
		width: 100%;
		/* 图片宽度不超过容器宽度 */
		max-width: 100%;
		/* 图片最大宽度 */
		height: 3000px;
		/* 图片高度自动缩放以保持比例 */
	}

	.colorGrey {
		color: #aeaeae;
		font-size: 12px;
	}

	.auto {
		width: 100%;
		height: auto;
	}

	.bw {
		justify-content: space-between;
	}

	.color-orang {
		color: #FF8B07;
		font-size: 14px;
	}

	.margin15 {
		margin-bottom: 15px;
	}

	.font12 {
		font-size: 12px;
	}

	.text-blue {
		color: #FF8B07;
		border-bottom: 2px solid;
	}

	.font16 {
		font-size: 20px;
	}

	.swiper-box {
		height: 400px;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
	}

	.fontBlod {
		font-weight: bold;
		font-size: 14px;
		color: #333;
	}

	.bjNew {
		padding: 3px 6px;
		box-sizing: border-box;
		font-size: 12px;
		color: #fff;
		background: linear-gradient(45deg, red, #FF8B07);
		border-radius: 3px;
		margin-right: 5px;
	}

	.imageTab {
		width: 100%;
		height: 100%;
	}

	.selectBtn {
		width: 150px;
		font-size: 14px;
		border-radius: 30px !important;
		height: 32px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		border: 1px solid #FF8B07 !important;
		margin: 0;
		background-color: #FF8B07 !important;
	}

	.flexrow {
		display: flex;
		align-items: center;
	}

	.flexCloum {
		display: flex;
		flex-direction: column;
		justify-content: center;

		align-items: center;
	}

	.priceCard {
		width: 100%;
		padding: 15px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		box-shadow: 1px 1px 4px #e5e5e5;
	}

	.card {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
	}

	.nav .cu-item {
		width: 25%;
		text-align: center;
		position: relative;
		height: 45px;
		display: inline-block;
		line-height: 45px;
		margin: 0 5px;
		padding: 0 10px;
	}

	.nav .cu-item.cu {
		border-bottom: 2px solid;
	}

	.nav {
		width: 100%;
		background-color: #fff;
		white-space: nowrap;
	}

	.activeItem {
		background-color: #FF8B07 !important;
		color: #fff !important;
	}

	.shop-item {
		display: flex;
		align-items: center;
	}

	.shop-item .itemBj {
		border-radius: 36px;
		background-color: #e4e4e4;
		padding: 5px 10px;
		box-sizing: border-box;
		font-size: 12px;
		margin-right: 10px;
		font-weight: normal;
	}

	.shopCloumn {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin: 10px 0;
	}

	.sureBtn {
		width: calc(100% - 30px);
		height: 36px;
		margin: 0 auto;
		background-color: #FF8B07;
		border-radius: 36px;
		color: #fff;
		font-size: 15px;
	}

	.sureBottom {
		width: 100%;
		padding: 15px;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
		background-color: #fff;
	}
</style>
